<template>
  <Card class="card-with-pager">
    <div slot="title">
      <Icon type="ios-location">></Icon>
      实时查询
      <div class="table-float" style="margin-top:-10px">
        <i-input v-model="id" type="text" size="small" placeholder="请输入车辆id" icon="model-s" @on-click="search(id)"><span slot="prepend">车辆id：</span></i-input>
      </div>
    </div>
    <baidu-map class="map" :center="center" :zoom="15" @ready="handler" :scroll-wheel-zoom="true">
      <bm-marker   :key="index" v-for="(item, index)  in this.$store.state.mapMessages"  :position="item.path" :dragging="false"  :icon="icon" ><bm-label  :content="item.content" :labelStyle="{color: item.color, fontSize : '12px'}"  :offset="{width: -35, height: 30}"/></bm-marker>
    </baidu-map>
  </Card>
</template>

<style>
  .map {
    width: 100%;
    height: 800px;
  }
</style>

<script>
  import Vue from 'vue'
  import VueNativeSock from 'vue-native-websocket'
  import config from '@/commons/config'
  import {BmlLushu} from 'vue-baidu-map'

  export default {
    components: {
      BmlLushu
    },
    data () {
      return {
        points: [
          { lng: 116.399, lat: 39.910 },
          { lng: 116.405, lat: 39.920 },
          { lng: 116.423493, lat: 39.907445 }
        ],
        play: true,
        center: {
          lng: 104.040997,
          lat: 30.578984
        },
        markerPoint: [
          {
          lng: 104.040997,
          lat: 30.578984
          },
          {
            lng: 104.052675,
            lat: 30.564152
          },
          {
            lng: 104.045417,
            lat: 30.577865
          }
        ],
        id: 1,
        icon: {
          url: 'http://api.map.baidu.com/library/LuShu/1.2/examples/car.png',
          size: {width: 52, height: 26},
          opts: {anchor: {width: 27, height:13}}
        },
        speed: 300
      }
    },
    mounted () {
      Vue.use(VueNativeSock, config.getWebsocketUri(), {
        store: this.$store,
        format: 'json',
        reconnection: true,
        reconnectionAttempts: 2,
        reconnectionDelay: 5000
      })
    },
    methods: {
      handler ({BMap, map}) {
      },
      search (id) {
        this.$store.state.websocket.$socket.sendObj({
          act: 'queryCarGps'
        })
      },
      ready () {
        this.change()
      },
      reset () {
        this.play = false
      },
      handleSearchComplete (res) {
        this.path = res.getPlan(0).getRoute(0).getPath()
      }
    }
  }
</script>